<script setup>
import {
  House,User,ChatLineRound,ShoppingCart,Menu
} from '@element-plus/icons-vue'
import router from "@/router/index.js";
import { SERVER_BASE_URL } from "@/utils/request.js";
import { onMounted, ref, computed } from "vue";
import { useUserStore } from '@/stores/user'

// 使用Pinia获取用户状态
const userStore = useUserStore()

// 用户信息
const user = ref({})
const nickname = ref('')

const emit = defineEmits(["update"])

// 初始化用户信息
const initUserInfo = () => {
  user.value = {}
  const userInfo = JSON.parse(localStorage.getItem('user'))
  if (userInfo) {
    user.value = userInfo
    nickname.value = userInfo.nickname || ''
    userStore.setUser(userInfo)
  }else {
    nickname.value = ''
  }
  // console.log(user.value)

}

// 处理头像点击
const handleAvatarClick = () => {
  if (user.value.role == 'ADMIN'){
    router.push('/admin')
    return
  }else if (user.value.role == 'RIDER'){
    router.push('/rider')
    return
  }
  router.push('/personal')
}

// 处理图片URL
const getAvatarUrl = (url) => {
  if (!url) return '';
  
  // 确保有服务器地址前缀
  let fullUrl = url;
  if (url.startsWith('/uploads/')) {
    fullUrl = SERVER_BASE_URL + url;
  }
  
  // 添加时间戳避免缓存
  const timestamp = Date.now();
  const result = fullUrl.includes('?')
      ? `${fullUrl.split('?')[0]}?t=${timestamp}`
      : `${fullUrl}?t=${timestamp}`;
  
  return result;
}

// 更新用户
const updateUser = () => {
  initUserInfo()
}

// 页面加载时初始化用户信息
onMounted(() => {
  initUserInfo()
})
</script>

<template>
  <div class="home">
    <div class="common-layout">
    <el-container style="width: 100%">
      <el-header
          style="border-bottom: 1px solid #ccc; height: 100px;padding-top: 20px;padding-bottom: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          display: flex; justify-content: space-between; align-items: center;">
        <!-- 左侧logo -->
        <div style="min-width: 200px;">
          <el-link :underline="false" :href="'/'">
            <img style="width: 200px;height: 80px;" src="@/assets/logo2.png" alt="Logo"/>
          </el-link>
        </div>

        <!-- 中间菜单项 -->
        <div style="display: flex; overflow-x: auto; white-space: nowrap; flex-grow: 1; justify-content: center;">
          <el-link @click="router.push('/')" style="width: 180px; flex-shrink: 0;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <el-icon><House /></el-icon><span style="margin-left: 8px;">首页</span>
          </el-link>
          <el-link @click="router.push('/category')" style="width: 180px;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <el-icon><Menu /></el-icon><span style="margin-left: 8px;">商品分类</span>
          </el-link>
          <el-link @click="router.push('/article')" style="width: 180px;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <el-icon><ChatLineRound /></el-icon><span style="margin-left: 8px;">校园圈</span>
          </el-link>
          <el-link @click="router.push('/cart')" style="width: 180px;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <el-icon><ShoppingCart /></el-icon><span style="margin-left: 8px;">购物车</span>
          </el-link>
          <el-link @click="router.push('/personal')" style="width: 180px;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <el-icon><User /></el-icon><span style="margin-left: 8px;">个人中心</span>
          </el-link>
        </div>

        <!-- 右侧登录按钮 -->
        <div style="min-width: 150px; display: flex; justify-content: flex-end;">
          <el-link v-if="nickname!=''" @click="handleAvatarClick" :underline="false" style="width: 150px;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <el-avatar :size="50" :src="getAvatarUrl(user.avatar)" class="user-avatar" />
            <span style="margin-left: 8px;">{{ nickname }}</span>
          </el-link>
          <el-link v-else @click="router.push('/login')" style="width: 150px;height: 80px; font-size: 18px; display: inline-flex; align-items: center;">
            <span>登录</span>
          </el-link>
        </div>
      </el-header>

      <el-main style="padding: 0; width: 100%; height: calc(100vh - 100px); overflow-x: hidden;">
        <RouterView @update="updateUser"></RouterView>
      </el-main>
    </el-container>
    </div>
  </div>
</template>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
}

.el-main {
  background-image: url('@/assets/bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  height: calc(100vh - 100px);
  overflow-y: auto;
}
</style>